<template>
	<view class="article-match flex-r ac jsb" v-if="matchList && matchList[0]">
		<view class="match-list flex-c">
			<view class="match flex-r" v-for="(match, index) in matchList" :class="{'border': index > 0}" :key="match.matchId" @tap.stop="goMatch(match)">
				<view class="match-btn flex-r ac" v-if="match.lotteryType">
					<text class="text-mini color-blue">{{match.lotteryType == 201 ? '竞篮' : (match.lotteryType == 301 ? '北单' : '竞足')}}</text>
				</view>
				<text class="match-info text-mini color-grey" space="ensp" v-if="match.sportId == 1 || match.lotteryType !== 201">
					{{match.matchTime.replace(/-/ig, '/').substr(5, 11) + ' ' + match.competitionName + ' ' + match.homeNameZh + ' VS ' +  match.awayNameZh}}
				</text>
				<text class="match-info text-mini color-grey" space="ensp" v-else>
					{{match.matchTime.replace(/-/ig, '/').substr(5, 11) + ' '  + match.competitionName + ' ' + match.awayNameZh + ' VS ' +  match.homeNameZh}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * ArticleMatch 方案比赛
	 * @description 方案比赛用于展示方案列表中的赛事信息
	 * @property {Array} matchList 比赛列表数组
	 * @property {Boolean} canTap = [true|false] 是否可以点击跳转
	 * @event {Function} openArticle 打开方案详情回调
	 * @example <ArticleMatch :matchList="matchList" :canTap="false"></ArticleMatch>
	 */
	export default {
		name:"ArticleMatch",
		emits: ['openArticle'],
		props: {
			matchList: {
				type: Array,
				default: () => {
					return []
				}
			},
			canTap: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			/**
			 * @description 进入比赛详情
			 * @param {object} match - 比赛信息对象
			 */
			goMatch(match){
				if(this.canTap){
					this.$CHS.goMatchDetail(match)
				}else{
					this.$emit('openArticle')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-match{
		max-width: 670rpx;
		position: relative;
		background-color: #F4F8FF;
		border-radius: 4rpx;
		box-sizing: border-box;
		padding: 0 10rpx;
		//margin-bottom: 20rpx;
		.match-list{
			width: 100%;
			.match{
				padding: 8rpx 0;
				.match-btn{
					height: 32rpx;
					background-color: #D9E5FF;
					border-radius: 4rpx;
					padding: 0 10rpx;
					white-space: nowrap;
				}
				.match-info{
					max-width: 580rpx;
					margin-left: 10rpx;
					line-height: 32rpx;
				}
				&.border{
					position: relative;
				}
				&.border::before{
					position: absolute;
					top: 0;
					left: 0;
					content: "";
					height: 1px;
					width: 100%;
					background-color: #EDEDED;
					transform: scaleY(0.5);
					transform-origin: 0 0;
				}
			}
		}
		.match-result{
			z-index: 1;
			position: absolute;
			right: 0;
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>